<template>
  <div class="light_view">
    <div class="api_table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="名称" width="180"></el-table-column>
        <el-table-column
          prop="tags"
          label="Tag"
          width="180"
          :filters="[
            { text: 'server', value: 'server' },
            { text: 'other', value: 'other' },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template #default="scope">
            <el-tag
              :type="scope.row.tags === 'server' ? '' : 'success'"
              disable-transitions
              >{{ scope.row.tags }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="url" label="接口地址" fit></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
const tableData = [
  {
    name: "灯光开关控制",
    tags: "server",
    url: "http://127.0.0.1:3000/api/fakeUpdata",
  },
  {
    name: "灯光在线信息",
    tags: "server",
    url: "http://127.0.0.1:3000/api/getEq",
  },
  {
    name: "灯光运行状态",
    tags: "server",
    url: "http://127.0.0.1:3000/api/getFackEqStatus",
  },
];
const ctrlData = [];
</script>

<style lang="scss" scoped>
.light_view {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
</style>